<template>
    <ContentWrap>
        <div class="flex justify-between">
            <div class="">
                <el-select v-model="state.searchData.tenantId" class="m-2" clearable filterable placeholder="请选择所属公司"
                    style="width: 200px;">
                    <el-option v-for="item in state.optionsTenantData" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
                <el-select clearable v-model="state.searchData.userType" class="m-2" placeholder="请选择用户类型"
                    style="width: 200px;">
                    <el-option v-for="item in state.optionsTypeData" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
                <ElInput v-model="state.searchData.searchValue" style="width: 266px;height: 32px;margin-right: 10px;"
                    placeholder="用户账户、手机号" :prefix-icon="Search" />
                <ElButton type="primary" :icon="Search" @click="onSearch">
                    {{ t('common.query') }}
                </ElButton>
                <ElButton :icon="Refresh" @click="onReset">
                    {{ t('common.reset') }}
                </ElButton>
            </div>
        </div>
        <!-- <div class="flex" style="margin-top: 25px;">
        <Asearch :data="state.schema" />
      </div> -->
        <div class="" style="margin-top: 25px;">
            <Table v-model:pageSize="pageSize" v-model:currentPage="currentPage" :columns="allSchemas.tableColumns"
                :data="dataList" :loading="loading" :pagination="{ total: total }" @register="tableRegister"
                :headerCellStyle="headerCellStyle" :rowStyle="rowStyle" />
        </div>
    </ContentWrap>
</template>
    
<script setup lang="tsx">
import { getUserListApi, editUserApi, changeUserApi } from "@/api/user/index"
import { Table } from '@/components/Table'
import { useTable } from '@/hooks/web/useTable'
import { Search, Plus, Refresh, Pointer, Star } from '@element-plus/icons-vue'
import { useEmitt } from '@/hooks/event/useEmitt'
import { ElButton, ElInput, ElMessage, ElSwitch, ElMessageBox } from 'element-plus'
// import { propTypes } from '@/utils/propTypes'
import { useI18n } from '@/hooks/web/useI18n'
import { ContentWrap } from '@/components/ContentWrap'
import { ref, reactive, unref } from "vue"
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { getTenantListApi } from "@/api/business/index"
const { t } = useI18n()
const state = reactive({
    reactBoolean: false,//重置
    optionsTenantData: [] as any,
    optionsTypeData: [
        // {
        //     value: "sys_user",
        //     label: "管理端用户"
        // },
        {
            value: "enterprise_user",
            label: "企业端用户"
        },
        {
            value: "application_user",
            label: "应聘端用户"
        }
    ],
    searchData: {
        userType: "",
        searchValue: "",
        tenantId: ""
    },
    ruleForm: {} as any,
    react: false,
})
// 表格基本信息
const crudSchemas = reactive<CrudSchema[]>([
    // {
    //     field: 'index',
    //     label: t('tableDemo.index'),
    //     type: 'index',
    //     search: {
    //         hidden: true
    //     },
    //     form: {
    //         hidden: true
    //     },
    //     detail: {
    //         hidden: true
    //     }
    // },
    {
        field: 'userId',
        label: t('用户ID'),
        search: {
            component: 'Input'
        },
        form: {
            component: 'Input',
            colProps: {
                span: 24
            }
        },
        detail: {
            span: 24
        }
    },
    {
        field: 'userName',
        label: t('用户账号'),
        search: {
            hidden: true
        }
    },
    {
        field: 'phonenumber',
        label: t('手机号'),
        search: {
            hidden: true
        },
    },
    {
        field: 'tenantName',
        label: t('所属公司'),
        search: {
            hidden: true
        },
        table: {
            slots: {
                default: (data: any) => {
                    return (
                        <>
                            <div >{data[0].row.tenantName}</div>
                        </>
                    )
                }
            }
        }
    },
    {
        field: 'userTypeName',
        label: t('用户类型'),
    },
    {
        field: 'status',
        label: t('用户状态'),
        search: {
            hidden: true
        },
        table: {
            slots: {
                default: (data: any) => {
                    return (
                        <>
                            <div ><ElSwitch style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" v-model={data[0].row.statusBoolean} before-change={() => switchClick(data[0].row)} /></div>
                        </>
                    )
                }
            }
        }
    }

])
const switchClick = (rows) => {
    let strings = rows.status == 1 ? "确认启用用户？" : "确认禁用用户？"
    ElMessageBox.confirm(
        `${strings}`,
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            let params = {
                userId: rows.userId,
                status: rows.status == 0 ? "1" : "0",
                userName: rows.userName,
                nickName: rows.nickName
            }
            changeUserApi(params).then((res: any) => {
                ElMessage({
                    type: 'success',
                    message: `${res.msg}`,
                })
                getList()
            }).catch((res: any) => {
                ElMessage({
                    type: 'error',
                    message: `${res.msg}`,
                })
            })

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消操作',
            })
        })
}
const { tableRegister, tableState, tableMethods } = useTable({
    fetchDataApi: async () => {
        const { currentPage, pageSize } = tableState
        const res: any = await getUserListApi({
            pageNum: state.react ? 1 : unref(currentPage),
            pageSize: unref(pageSize),
            userType: state.searchData.userType,
            searchValue: state.searchData.searchValue,
            tenantId: state.searchData.tenantId,
            isAsc: "desc", 
            orderByColumn: "create_time"
        })
        console.log("用户：", res);
        state.react = false
        res.rows.forEach(elements => {
            if (elements.status == 1) {
                elements.statusBoolean = false
            } else {
                elements.statusBoolean = true
            }
            state.optionsTenantData.forEach(element => {
                if (elements.tenantId == element.value) {
                    elements.tenantName = element.label
                }

            })
            state.optionsTypeData.forEach(element => {
                if (elements.userType == element.value) {
                    elements.userTypeName = element.label
                }

            })
        })
        return {
            list: res.rows,
            total: res.total
        }
    }
})
// 表格头部信息
const headerCellStyle: any = {
    "background": "#F2F6FC",
    "height": "48px"
}
// 
const rowStyle: any = {
    "height": "48px"
}
const { loading, dataList, total, currentPage, pageSize } = tableState

const { getList, getElTableExpose, delList } = tableMethods
useEmitt({
    name: 'getList',
    callback: (type: string) => {
        if (type === 'add') {
            currentPage.value = 1
        }
        getList()
    }
})
const { allSchemas } = useCrudSchemas(crudSchemas)
// 查询
const onSearch = () => {
    console.log("查询");
    state.react = true
    getList()
}
// 重置
const onReset = () => {
    console.log("重置");
    state.searchData.searchValue = "";
    state.searchData.userType = "";
    state.searchData.tenantId = "";
    state.react = true
    getList()
}
// 修改
const getTenantListApi_ = async () => {
    getTenantListApi({ pageNum: 1, pageSize: 10000 }).then((res: any) => {
        console.log("租户", res);
        state.optionsTenantData = []
        res.rows.forEach(element => {
            let obj = {
                label: element.companyName,
                value: element.tenantId
            }
            state.optionsTenantData.push(obj)
        });
        getList()
    })
}
getTenantListApi_()

</script>
    
<style lang="less" scoped></style>